import QtQuick
import QtQuick.Layouts
import Fk
import Fk.Pages
import Fk.RoomElement

GraphicsBox {
  property var choices: []
  property var result: []
  property string prompt: ""

  id: root
  title.text: Util.processPrompt(prompt)
  width: Util.processPrompt(prompt).length*20
  height: body.height + title.height + 50

  GridLayout {
    id: body
    anchors.horizontalCenter: parent.horizontalCenter
    y: title.height + 5
    flow: GridLayout.TopToBottom
    columns: 1
    columnSpacing: 10

    Repeater {
      model: choices

      MetroButton {
        Layout.fillWidth: true
        text: Util.processPrompt(modelData)
        enabled: choices.indexOf(modelData) !== -1
        property bool selected: false
        textColor: selected? "gold" : "white"
        border.color: selected? "gold" : "white"

        onClicked: {
          selected =! selected;
          if (selected) {
            result.push(modelData);
          } else {
            const index = result.indexOf(modelData);
            if (index !== -1) {
              result.splice(index, 1);
            }
          }
          updata();
        }
      }
    }
  }

  MetroButton {
    id: buttonConfirm
    text: luatr("OK")
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.bottom: parent.bottom
    anchors.bottomMargin: 5
    enabled: false
    onClicked: {
      close();
      roomScene.state = "notactive";
      ClientInstance.replyToServer("", JSON.stringify(result));
    }
  }

  function updata() {
    const count = result.length;
    buttonConfirm.enabled = count > 0 && result.every(val => choices.slice(0, count).includes(val));
  }

  function loadData(data) {
    choices = data[0];
    prompt = data[1];
  }
}
